<style>
    .layui-layout-admin .layui-logo, .layui-layout-admin .layui-side, .layui-side-menu .layui-side-scroll, .layui-side-menu .layui-side-scroll, .layui-side-menu .layui-nav {
        width: 75px !important;
    }

    .layadmin-pagetabs, .layui-layout-admin .layui-body, .layui-layout-admin .layui-footer, .layui-layout-admin .layui-layout-left {
        left: 75px;
    }

    .layui-nav-tree .layui-nav-item {
        padding: 8px 0;
        cursor: pointer;
        border-radius: 5px;
    }

    .layui-nav-tree .layui-nav-item .menu {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: initial;
    }

    .layui-side-menu .layui-nav .layui-nav-item .menu {
        padding: initial;
    }

    .layui-side-menu .layui-nav .layui-nav-item .menu i, .layui-side-menu .layui-nav .layui-nav-item .menu div {
        padding: 3px 0;
    }

    .layui-side-menu .layui-nav > .layui-nav-item .layui-icon:first-child {
        position: initial;
        margin-top: initial;
        line-height: initial;
        font-size: 15px;
    }

    .layui-side-second {
        width: 145px;
        margin-left: 75px;
        display: none;
    }

    .layui-side-second .layui-menu-body-title {
        text-align: center;
    }

    .layui-side-second .layui-menu li {
        line-height: 36px;
    }

    .layui-side-second .title-box {
        margin-top: 2px;
    }

    .layui-side-second .title-box .layui-menu-body-title {
        z-index: 99999;
        padding: initial;
        font-size: 15px;
        display: none;

    }

    .layui-side-menu .menu-this {
        background: rgb(59, 145, 255);
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .layui-nav-tree .hover-this {
        background: rgb(59, 145, 255, 0.2);
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .layui-nav-tree .resident-this {
        background: rgb(59, 145, 255, 0.5);
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .top-hover-dropdown {
        left: 75px !important;
        display: none;
        padding-left: 3px;
        background: none;
        box-shadow:none;
        border: none;
    }

    .top-hover-dropdown-third {
        left: 198px !important;
        display: none;
        padding-left: 3px;
        background: none;
        box-shadow:none;
        border: none;
    }

    .hover-dropdown-par {
        box-shadow: 1px 1px 4px rgb(0 0 0 / 2%);
        border: 1px solid #eee;
        width: 120px;
        background: #fff;
        text-align: center;
        border-radius: 5px;
    }
    .hover-dropdown-par .title{
        padding: 13px 10px 13px 15px;
        color: #000;
        font-size: 15px;
        font-weight: bold;
        border-bottom: 1px solid #f5f5f5;
        text-align: left;
    }

    .hover-dropdown-par .layui-menu-body-title{
        margin: initial;
        padding: 5px;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .hover-dropdown-menu .layui-menu-body-panel{
        margin-left: 3px;
        border-radius:5px;
        width: 130px;
    }
    .layui-menu .layui-menu-item-group>.layui-menu-body-title{
        color: initial;
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: space-between;*/
    }
    .layui-menu-item-parent{
        padding: 5px 5px 5px 10px !important;
    }
    .layui-menu-item-group{
        padding:0 !important;
    }
    .layui-menu-item-group .layui-menu-body-title{
        margin: initial !important;
    }
    .layui-menu-item-group li{
        padding: 0;
    }
    .layui-menu .layui-menu-item-checked, .layui-menu .layui-menu-item-checked2{
        background-color: #eee !important;
    }
</style>
<!-- 侧边菜单 -->
<div class="layui-side layui-side-menu">
    <div class="layui-side-scroll">
        <div class="layui-logo" style="display: flex;align-items: center;justify-content: center">
            {if !empty(cache('system')['web_site_logo'])}
            <img src="{:cache('system')['web_site_logo']}"
                 style="width: 30px;height: 30px;"/>
            {/if}
        </div>
        <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
            lay-filter="layadmin-system-side-menu">
            {foreach name="menus" item="vo" key="key"}
            <li data-name="home" class="layui-nav-item"
                data-title="{$vo.title}"
                data-child='<?php echo $vo["child"] ? json_encode($vo["child"]) : "";?>'>
                <div class="menu">
                    <i class="layui-icon {$vo.css?$vo.css:'layui-icon-component'}"></i>
                    <div>{$vo.sub_title}</div>
                </div>
            </li>
            {/foreach}
            {foreach name="attachMenu" item="vo" key="key"}
            <li data-name="home" class="layui-nav-item"
                data-title="{$vo.title}"
                data-child='<?php echo $vo["child"] ? json_encode($vo["child"]) : "";?>'>
                <div class="menu">
                    <i class="layui-icon {$vo.css?$vo.css:'layui-icon-component'}"></i>
                    <div>{$vo.sub_title}</div>
                </div>
            </li>
            {/foreach}
            <span class="layui-nav-bar" style="top: 255px; height: 0px; opacity: 0;"></span>
        </ul>
    </div>

</div>

<div class="layui-dropdown layui-border-box layui-panel layui-anim layui-anim-upbit top-hover-dropdown">
    <div class="hover-dropdown-par">
        <div class="title"></div>
        <ul class="layui-menu layui-dropdown-menu hover-dropdown-menu hover-dropdown-2"></ul>
    </div>
</div>


<!-- 二级菜单 -->
<div class="layui-side-second">
    <ul class="layui-menu title-box">
        <li>
            <div class="layui-menu-body-title title-box-side">{:cache('system')['web_site_title']}</div>
        </li>
    </ul>
    <ul class="layui-menu secondBox"></ul>
    <script id="secondTpl" type="text/html">
        {{#  layui.each(d.data, function(index, item){ }}
        <li {{#  if(!item.child || item.child.length <= 0){ }} lay-href="{{item.href}}" {{#  } }} class="{{d.class}}" lay-options="{type: '{{d.type}}' }">

        <div class="layui-menu-body-title">
            {{item.title}}
            {{#  if(item.child && item.child.length > 0){ }}
            <i class="layui-icon {{d.icon}}"></i>
            {{#  } }}
        </div>
        {{#  if(item.child && item.child.length > 0){ }}
        {{#  if(d.type == 'parent'){ }}
        <div class="layui-panel layui-menu-body-panel">
            <ul>
                {{#  layui.each(item.child, function(key, val){ }}
                <li lay-href="{{= val.href }}"><div class="layui-menu-body-title">{{= val.title }}</div></li>
                {{#  }); }}
            </ul>
        </div>
        {{#  }else{ }}
        <ul>
            {{#  layui.each(item.child, function(key, val){ }}
            <li lay-href="{{= val.href }}"><div class="layui-menu-body-title">{{= val.title }}</div></li>
            {{#  }); }}
        </ul>
        {{#  } }}
        {{#  } }}
        </li>
        {{#  }); }}
    </script>
</div>
